<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
 <style>
 *{
    margin:0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
}


ul{
    width: 600px;
    display: flex;
    flex-wrap: wrap;
background-color: rgb();
}
ul li{ 
    width: 20%;
    height: 100px;
    border-radius: 5px;
    margin:20px;
    background-color: orange;
 
}
button{
    width: 477px;
    display: block;
   padding: 10px;
   text-align: center;
    border:1px solid orange;
    border-radius: 4px;
    margin:10px 0;
}
 
 
 </style>
</head>
<body>
    <div class="main">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <button class="begin">开始闪</button>
        <button class="end">结束闪</button>

    </div>

    <script>


window.onload=function(){
var timer;
var lis=document.querySelectorAll("ul li");
function animate(){//动画函数
    clearInterval(timer);
timer = setInterval(function(){
  
    do{
     a=Math.ceil(Math.random()*9);
     b=Math.ceil(Math.random()*9);
     c=Math.ceil(Math.random()*9);//生成1-9不同的三个数字
    }while(a==b||a==c||b==c)
    console.log(a,b,c);
    function randomRgbColor() { //随机生成RGB颜色
    do{
    var r = Math.floor(Math.random() * 256); //随机生成256以内r值
    var g = Math.floor(Math.random() * 256); //随机生成256以内g值
    var b = Math.floor(Math.random() * 256); //随机生成256以内b值
    }while(r!=255&&g!=165&&b!=0)
    return 'rgb('+r+','+g+','+b+')' ; //返回rgb(r,g,b)格式颜色
}

    d=randomRgbColor();
    e=randomRgbColor();
    f=randomRgbColor();
    console.log(d,e,f);
    console.log(d,e,f);
    

//遍历li 数组 相应颜色改变  其他变为橙色
    
    for(var i=0;i<lis.length;i++){
       if(i==a){
        lis[i].style.backgroundColor=d;
       }
       else if(i==b){
        lis[i].style.backgroundColor=e;
       }
       else if(i==c){
        lis[i].style.backgroundColor=f;
       }
       else{
           lis[i].style.backgroundColor="orange";
       }
    }
},1000);

}


    var begin=document.querySelector(".begin");
    var end=document.querySelector(".end");
    begin.addEventListener("click",function(){
        this.style.backgroundColor="orange";
        end.style.backgroundColor="";
        animate();//调用动画函数
       
    })
    end.addEventListener("click",function(){
        this.style.backgroundColor="orange";
        begin.style.backgroundColor="";
        clearInterval(timer);//清除动画函数
        for(var i=0;i<lis.length;i++){
            lis[i].style.backgroundColor="orange";
        }
        
    })
    
    
}

    </script>
</body>
</html>